<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"/> 基本信息</span>
        <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData">

          <template slot="blank_1539756400000_67814" slot-scope="scope">
            <!-- 企业信息 -->
            <!-- 通过 v-model="scope.model.blank_1539756400000_67814" 绑定数据 -->
          </template>

          <template slot="blank_1539756445000_39743" slot-scope="scope">
            <!-- 产品信息 -->
            <!-- 通过 v-model="scope.model.blank_1539756445000_39743" 绑定数据 -->
          </template>

          <template slot="blank_1539756519000_32564" slot-scope="scope">
            <!-- 账户信息 -->
            <!-- 通过 v-model="scope.model.blank_1539756519000_32564" 绑定数据 -->
          </template>

        </generate-form>
      </el-tab-pane>
      <el-tab-pane label="计息信息">
        <generate-form ref="generateForm" :data="jsonData1" :remote="remoteFuncs" :value="editData"/>
      </el-tab-pane>
    </el-tabs>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'CreateFromSetname',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'blank', 'name': '企业信息', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1539756400000_67814' }, 'key': '1539756400000_67814', 'model': 'blank_1539756400000_67814', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '公司代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539756510000_37280' }, 'key': '1539756510000_37280', 'model': 'input_1539756510000_37280', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '开户单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539756512000_31447' }, 'key': '1539756512000_31447', 'model': 'input_1539756512000_31447', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539756288000_5795' }, 'key': '1539756288000_5795', 'model': 'grid_1539756288000_5795', 'rules': [] }, { 'type': 'blank', 'name': '产品信息', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1539756445000_39743' }, 'key': '1539756445000_39743', 'model': 'blank_1539756445000_39743', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '产品编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539775287000_79546' }, 'key': '1539775287000_79546', 'model': 'input_1539775287000_79546', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '产品说明', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539775290000_50798' }, 'key': '1539775290000_50798', 'model': 'input_1539775290000_50798', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539756449000_61208' }, 'key': '1539756449000_61208', 'model': 'grid_1539756449000_61208', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '币种', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'bizhong' }, 'key': '1539775293000_5838', 'model': 'select_1539775293000_5838', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539756517000_75799' }, 'key': '1539756517000_75799', 'model': 'grid_1539756517000_75799', 'rules': [] }, { 'type': 'blank', 'name': '账户信息', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1539756519000_32564' }, 'key': '1539756519000_32564', 'model': 'blank_1539756519000_32564', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账户有效期', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539775359000_22396' }, 'key': '1539775359000_22396', 'model': 'input_1539775359000_22396', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '支付条件', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'zhifutiaojian' }, 'key': '1539775362000_14503', 'model': 'select_1539775362000_14503', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539756522000_53274' }, 'key': '1539756522000_53274', 'model': 'grid_1539756522000_53274', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '结算户标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'jiesuanhubiaozhi' }, 'key': '1539775365000_3124', 'model': 'select_1539775365000_3124', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539756530000_62243' }, 'key': '1539756530000_62243', 'model': 'grid_1539756530000_62243', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      jsonData1: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '计息标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'jixibiaozhi' }, 'key': '1539775765000_95942', 'model': 'select_1539775765000_95942', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '起息方式', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'qixifangshi' }, 'key': '1539775767000_31877', 'model': 'select_1539775767000_31877', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539775722000_22599' }, 'key': '1539775722000_22599', 'model': 'grid_1539775722000_22599', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '利率编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539775775000_76601' }, 'key': '1539775775000_76601', 'model': 'input_1539775775000_76601', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '基准利率', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539775778000_72693' }, 'key': '1539775778000_72693', 'model': 'input_1539775778000_72693', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539775725000_51420' }, 'key': '1539775725000_51420', 'model': 'grid_1539775725000_51420', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '利率浮动标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'lilvfudongbiaozhi' }, 'key': '1539775770000_70610', 'model': 'select_1539775770000_70610', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '利率浮动比例', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539775782000_94264' }, 'key': '1539775782000_94264', 'model': 'input_1539775782000_94264', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539775727000_63215' }, 'key': '1539775727000_63215', 'model': 'grid_1539775727000_63215', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '实际利率', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539775785000_91608' }, 'key': '1539775785000_91608', 'model': 'input_1539775785000_91608', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'time', 'name': '起息日期', 'icon': 'regular/clock', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'isRange': false, 'arrowControl': true, 'format': 'HH:mm:ss', 'required': false, 'width': '100%', 'remoteFunc': 'func_1539775798000_4250' }, 'key': '1539775798000_4250', 'model': 'time_1539775798000_4250', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539775729000_93427' }, 'key': '1539775729000_93427', 'model': 'grid_1539775729000_93427', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      editData: {},
      values: {},
      remoteFuncs: {
        bizhong(resolve) {
          // 币种 select_1539775293000_5838
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('币种').then(response => { resolve(response.data) })
        },

        zhifutiaojian(resolve) {
          // 支付条件 select_1539775362000_14503
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('支付条件').then(response => { resolve(response.data) })
        },

        jiesuanhubiaozhi(resolve) {
          // 结算户标志 select_1539775365000_3124
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('结算户标志').then(response => { resolve(response.data) })
        },

        jixibiaozhi(resolve) {
          // 计息标志 select_1539775765000_95942
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('计息标志').then(response => { resolve(response.data) })
        },

        qixifangshi(resolve) {
          // 起息方式 select_1539775767000_31877
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('起息方式').then(response => { resolve(response.data) })
        },

        lilvfudongbiaozhi(resolve) {
          // 利率浮动标志 select_1539775770000_70610
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('利率浮动标志').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
